<template>
  <div>
    <el-form-item label="商品规格">
      <lang-wrapper :lang="!!langId" :active-lang-id="langId" @change="handleChangeLang"/>
      <div class="tip">最多添加{{ maxSkuPropTypeCount }}个商品规格</div>
      <div v-for="(prop,propIndex) in value" :key="propIndex" class="prop">
        <div class="prop__header">
          <div class="flex space-between">
            <div class="nowrap">
              {{ prop.propType }}
            </div>
            <el-button v-if="!prop.propType" type="text" @click="handleShowAddSkuPropDialog(prop)">设置规格类型</el-button>
            <el-input
              v-else-if="langId"
              v-model="prop.langText[activeLangId]"
              size="mini"
              :placeholder="'请输入'+activeLangName"
            />
          </div>
          <div>
            <el-button type="text" @click="handleRemoveProp(propIndex)">删除规格</el-button>
          </div>
        </div>
        <div v-if="prop.propType" class="prop__content">
          <vuedraggable
            v-model="prop.propNameList"
            tag="ul"
            class="vue-draggable"
            draggable=".draggable-item-wrap"
          >
            <li
              v-for="(item,itemIndex) in prop.propNameList"
              :key="item+itemIndex"
              class="flex draggable-item-wrap"
            >
              <div class="draggable-item">
                <span>{{ item.name }}</span>
                <i class="el-icon-error" @click="handleRemoveRule(prop,itemIndex)"/>
              </div>
              <el-input
                v-if="langId"
                v-model="item.langText[activeLangId]"
                size="mini"
                :placeholder="'请输入'+activeLangName"
              />
            </li>
          </vuedraggable>
          <div>
            <el-input
              v-model="prop.propName"
              clearable
              placeholder="请输入规格名称"
              size="mini"
              style="width:130px"
              @keypress.native.enter="handleAddRule(prop)"
            />
            <el-button type="text" style="margin-left:15px" @click="handleAddRule(prop)">添加</el-button>
          </div>
        </div>
      </div>
      <el-button
        v-if="value.length<maxSkuPropTypeCount"
        icon="el-icon-plus"
        size="mini"
        @click="handleAddSkuProp"
      >添加规格
      </el-button>
    </el-form-item>

    <el-dialog title="添加规格类型" :visible.sync="addSkuPropDialogShowed" width="420px" append-to-body>
      <el-form
        ref="form4SkuPropsTypes"
        :disabled="isSubmitting"
        :rules="skuPropsTypeRules"
        :model="skuPropsTypeForm"
        label-width="120px"
      >
        <el-form-item label="规格类型名称" prop="propsName">
          <el-input v-model="skuPropsTypeForm.propsName" placeholder="请输入规格类型名称"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="default" @click="addSkuPropDialogShowed=false">取消</el-button>
        <el-button type="primary" :loading="isSubmitting" @click="handleSaveSkuPropType">保存提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import LangWrapper from '@/framework/components/lang/LangWrapper'
import LangText from '@/framework/components/lang/LangText'
import vuedraggable from 'vuedraggable'
import LangTypeEnum from '@/framework/constant/LangTypeEnum'

export default {
  name: 'SkuPropTypeEditor',
  components: { LangWrapper, vuedraggable },
  props: {
    langId: {
      type: String,
      default: null
    },
    maxSkuPropTypeCount: {
      type: Number,
      default: 3
    },
    value: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    activeLangName() {
      return LangTypeEnum.getById(this.activeLangId).name
    }
  },
  data() {
    return {
      activeLangId: this.langId,
      isSubmitting: false,
      skuPropsTypeForm: {
        propsName: ''
      },
      skuPropsTypeRules: {
        propsName: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入规格类型名称'
          },
          {
            validator: (rule, value, callback) => {
              if (!value.trim()) {
                return callback(new Error('规格类型名称不能为空'))
              }
              if (this.value.some(el => el.propType === value.trim())) {
                return callback(new Error('规格类型名称已存在'))
              }
              callback()
            },
            trigger: 'change'
          }
        ]
      },
      addSkuPropDialogShowed: false
    }
  },
  methods: {
    handleSaveSkuPropType() {
      this.$refs.form4SkuPropsTypes.validate(v => {
        if (v) {
          this.addSkuPropDialogShowed = false
          this.currentProp.propType = this.skuPropsTypeForm.propsName.trim()
        }
      })
    },
    handleShowAddSkuPropDialog(prop) {
      this.skuPropsTypeForm.propsName = ''
      this.addSkuPropDialogShowed = true
      this.currentProp = prop
    },
    handleChangeLang({ id }) {
      this.activeLangId = id
      this.$emit('update.langId', id)
    },
    handleAddSkuProp() {
      this.value.push({
        propType: '',
        langText: LangText.create(),
        propNameList: [],
        propName: ''
      })
    },
    handleRemoveProp(index) {
      if (this.value[index].propNameList.length > 0) {
        this.confirm('删除该规格后，当前的规格相关数据将丢失，确认要删除吗？').then(r => {
          if (r) {
            this.value.splice(index, 1)
          }
        })
      } else {
        this.value.splice(index, 1)
      }
    },
    handleAddRule(prop) {
      if (prop.propName.trim() === '') {
        this.showError('规格名称不能为空')
        return
      }
      if (!prop.propNameList.includes(prop.propName.trim())) {
        prop.propNameList.push({
          name: prop.propName.trim(),
          langText: LangText.create()
        })
        prop.propName = ''
      } else {
        this.showError('规格名称已存在')
      }
    },
    handleRemoveRule(prop, index) {
      prop.propNameList.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="scss">
.prop {
  margin-bottom: 10px;
}

.errmsg-tip {
  color: #F56C6C;
  font-size: 12px;
}

.prop__content {
  padding: 10px;
  background: #fafafa;
}

.prop__header {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f4f5f9;
}

.vue-draggable {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .draggable-item {
    &-wrap {
      margin-bottom: 10px;
      margin-right: 20px;
    }

    position: relative;
    background-color: #fff;
    width: 100px;
    padding: 7px 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    font-size: 12px;
    line-height: 1;
    margin-right: 15px;

    span {
      text-overflow: ellipsis;
      display: block;
      overflow: hidden;
      width: 100px;
      white-space: nowrap;
    }

    .el-icon-error {
      display: none;
      position: absolute;
      color: red;
      right: -8px;
      top: -8px;
      font-size: 16px;
    }

    &:hover {
      .el-icon-error {
        display: block;
      }
    }
  }
}

</style>
